:host {
  display: inline-block;
  width: 200px;
  position: relative;
}

.wrapper {
  --row-count: 1;
  --maxrow-count: ;
  --line-height: var(--bl-font-title-3-line-height);
  --scroll-height: var(--line-height);
  --padding-vertical: var(--bl-size-2xs);
  --padding-horizontal: var(--bl-size-xs);
  --label-padding: var(--bl-size-3xs);
  --border-size: 1px;
  --default-scroll-height: calc((var(--row-count) * var(--line-height)) + var(--padding-vertical));
  --height: max(var(--scroll-height), var(--default-scroll-height));
  --input-font: var(--bl-font-body-text-2);
  --border-radius: var(--bl-size-3xs);
  --border-color: var(--bl-color-neutral-lighter);
  --background-color: var(--bl-color-neutral-full);

  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--bl-size-3xs);
}

.input-wrapper {
  border: solid var(--border-size) var(--border-color);
  border-radius: var(--border-radius);
  padding: 0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));
  padding-top: var(--padding-vertical);
  display: flex;
  box-sizing: border-box;
  background-color: var(--background-color);
  margin: 0;
  width: 0;
  min-width: 100%;
}

textarea {
  --parent-padding: calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));

  width: 100%;
  align-self: stretch;
  outline: none;
  font: var(--input-font);
  padding: 0 calc(var(--padding-horizontal) - var(--border-size));
  padding-bottom: var(--padding-vertical);
  margin: 0 calc(-1 * var(--parent-padding));
  border: none;
  border-radius: var(--border-radius);
  color: var(--bl-color-neutral-darker);
  resize: vertical;
  background-color: transparent;
  display: block;
}

:host([size="large"]) .wrapper {
  --padding-vertical: var(--bl-size-xs);
  --padding-horizontal: var(--bl-size-m);
}

:host([size="small"]) .wrapper {
  --padding-vertical: var(--bl-size-3xs);
  --padding-horizontal: var(--bl-size-xs);
  --input-font: var(--bl-font-body-text-3);
  --line-height: var(--bl-font-title-4-line-height);
}

textarea:disabled {
  background-color: var(--bl-color-neutral-lightest);
  color: var(--bl-color-neutral-light);
  cursor: not-allowed;
}

:host([disabled]) .wrapper {
  --background-color: var(--bl-color-neutral-lightest);
}

:host([expand]) textarea {
  overflow: hidden;
  resize: none;
  height: var(--height);
}

:host([expand][max-rows]) textarea {
  --maxrow-height: calc((var(--maxrow-count) * var(--line-height)) + var(--padding-vertical));

  overflow-y: scroll;
  height: min(var(--height), var(--maxrow-height));
}

.wrapper:focus-within {
  --border-color: var(--bl-color-primary);
}

.dirty.max-len-invalid,
.dirty.invalid {
  --border-color: var(--bl-color-danger);
}

:host([label]) ::placeholder {
  color: transparent;
  transition: color ease-out 0.4s;
}

.input-wrapper legend,
label {
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

label {
  max-width: max-content;
  position: absolute;
  transition: all ease-in 0.1s;
  font: var(--bl-font-title-3-regular);
  top: var(--padding-vertical);
  inset-inline-start: var(--padding-horizontal);
  inset-inline-end: var(--padding-horizontal);
  pointer-events: none;
  color: var(--bl-color-neutral-light);
}

.input-wrapper legend {
  height: 0;
  visibility: hidden;
  display: none;
}

.input-wrapper legend span {
  padding: 0 var(--label-padding);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

:where(.wrapper:focus-within, .wrapper.has-value) label {
  top: 0;
  inset-inline-start: var(--padding-horizontal);
  transform: translateY(-50%);
  font: var(--bl-font-caption);
  color: var(--bl-color-neutral-dark);
  pointer-events: initial;
  z-index: var(--bl-index-base);
}

:host([label]) :where(.wrapper:focus-within, .wrapper.has-value) legend {
  max-width: 100%;
  font: var(--bl-font-caption);
  display: block;
}

:host ::placeholder,
:host([label-fixed]) ::placeholder {
  color: var(--bl-color-neutral-light);
}

:host([label-fixed]) label {
  position: static;
  transition: none;
  transform: none;
  pointer-events: initial;
  font: var(--bl-font-caption);
  color: var(--bl-color-neutral-dark);
  background-color: initial;
  padding: 0;
}

:host([label-fixed]) legend {
  display: none;
}

.hint {
  display: none;
  font: var(--bl-font-body-text-3);
}

:host([character-counter]) .hint,
:host([help-text]) .hint,
.dirty.invalid .hint {
  display: flex;
  gap: var(--bl-size-3xs);
}

.hint > * {
  margin: 0;
  padding: 0;
}

.help-text,
.invalid-text {
  flex: 1;
}

.counter-text {
  color: var(--bl-color-neutral-dark);
  margin-inline-start: auto;
}

:where(.max-len-invalid, .dirty.invalid) .hint > .counter-text {
  color: var(--bl-color-danger);
}

.dirty.invalid label {
  color: var(--bl-color-danger);
}

.invalid-text {
  display: none;
  color: var(--bl-color-danger);
}

.help-text {
  color: var(--bl-color-neutral-dark);
}

:where(.dirty.max-len-invalid, .dirty.invalid) .hint > .invalid-text {
  display: inline-block;
}

.dirty.invalid .hint > .help-text {
  display: none;
}
